<style>
    body {
        font-family: 'Ubuntu', sans-serif;
        width: 94%;
        margin-left: 2%;
    }

    p {
        color: #525252;
        font-size: 12px;
    }

    .skillbar {
        position: relative;
        display: block;
        margin-bottom: 15px;
        width: 100%;
        background: #eee;
        height: 35px;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -webkit-transition: 0.4s linear;
        -moz-transition: 0.4s linear;
        -ms-transition: 0.4s linear;
        -o-transition: 0.4s linear;
        transition: 0.4s linear;
        -webkit-transition-property: width, background-color;
        -moz-transition-property: width, background-color;
        -ms-transition-property: width, background-color;
        -o-transition-property: width, background-color;
        transition-property: width, background-color;
    }

    .skillbar-title {
        position: absolute;
        top: 0;
        left: 0;
        font-weight: bold;
        font-size: 13px;
        color: #ffffff;
        background: #6adcfa;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-bottomleft: 3px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .skillbar-title span {
        display: block;
        background: rgba(0, 0, 0, 0.1);
        padding: 0 20px;
        height: 35px;
        line-height: 35px;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-bottomleft: 3px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .skillbar-bar {
        height: 35px;
        width: 0px;
        background: #6adcfa;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }

    .skill-bar-percent {
        position: absolute;
        right: 10px;
        top: 0;
        font-size: 16px;
        height: 35px;
        line-height: 35px;
        color: black;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <div class="col-xs-12 col-sm-8">
            <h2>活动数据</h2>
        </div>
    </div>

    <div class="skillbar clearfix " data-percent="">
        <div class="skillbar-title" style="background: #2980b9;"><span>合成视频总数</span></div>
        <div class="skillbar-bar" style="background: #3498db;"></div>
        <div class="skill-bar-percent">{$data['compositeTotal']}</div>
    </div>

    <div class="skillbar clearfix " data-percent="">
        <div class="skillbar-title" style="background: #2c3e50;"><span>可用视频总数</span></div>
        <div class="skillbar-bar" style="background: #2c3e50;"></div>
        <div class="skill-bar-percent">{$data['availableVideoTotal']}</div>
    </div>

    <div class="skillbar clearfix " data-percent="">
        <div class="skillbar-title" style="background: #27ae60;"><span>分享视频总数</span></div>
        <div class="skillbar-bar" style="background: #2ecc71;"></div>
        <div class="skill-bar-percent">{$data['shareVideoTotal']}</div>
    </div>
</form>

<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.skillbar').each(function () {
            $(this).find('.skillbar-bar').animate({
                width: $(this).attr('data-percent')
            }, 1000);
        });
    });
</script>


